<template>
  <div ref="chartRef" class="flex items-center justify-center">暂无数据</div>
</template>

<script setup lang="tsx">
import { nextTick, onMounted, ref, watch } from 'vue';
import { useTemplateRef } from 'vue';
import { getTriggerStatistics } from '@/pages/screen/api';
import * as eCharts from 'echarts';
import { eventBus } from '@/utils/eventMitt';

const chartRef = useTemplateRef('chartRef');
const params = ref(history.state.params || '');

// 获取触发统计数据
const seriesData = ref<any>([]);
const init = async () => {
  const res = await getTriggerStatistics(params.value);
  seriesData.value = res.data;
  renderChart();
};

const renderChart = () => {
  const _seriesData = [
    seriesData.value.point || 0,
    seriesData.value.area || 0,
    seriesData.value.earthquake || 0,
    seriesData.value.warning || 0,
  ];

  if (!_seriesData.some((item) => item !== 0)) return;
  const option = {
    tooltip: {
      trigger: 'axis', // 悬浮在 x 轴线上时显示所有系列数据
      axisPointer: {
        type: 'line', //提示线，可以改成 shadow 或 cross
      },
    },
    grid: {
      top: '10%',
      bottom: '12%',
      right: '0%',
    },
    xAxis: {
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          type: 'dashed', // 设置X轴为虚线
        },
      },
      axisLabel: {
        color: '#fff', // x轴标签字体颜色（红色）
        fontSize: 12, // 可选，字体大小
        interval: 0, // 所有标签都显示
      },
      data: ['强震测点触发', '强震区域触发', '地震触发', '地震预警触发'],
    },
    yAxis: {
      minInterval: 1,
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255,255,255,.3)',
        },
      },
      axisLabel: {
        color: '#fff', // x轴标签字体颜色（红色）
        fontSize: 14, // 可选，字体大小
      },
    },
    series: [
      {
        type: 'pictorialBar',
        barCategoryGap: '30%',
        symbol:
          'path://M20 0C22.7941 88 40 112 40 112H0C0 112 17.2059 88 20 0Z',
        itemStyle: {
          opacity: 1,
          color: new eCharts.graphic.LinearGradient(
            0,
            0,
            1,
            1, // 线性渐变方向
            [
              { offset: 0, color: '#007ADF' },
              { offset: 1, color: '#00ECBC' },
            ],
          ),
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
          },
        },
        data: _seriesData,
        z: 10,
      },
    ],
  };

  const chart = eCharts.init(chartRef.value);
  chart.setOption(option);
  addEventListener('resize', function () {
    chart.resize();
  });
};

onMounted(() => {
  nextTick(async () => {
    await init();
  });
});

// 监听左侧下拉框变化:重新获取测点信息
eventBus.on('changeStructure', (data: any) => {
  params.value = data.params;
});

// 监听params变化后重新获取数据
watch(() => params.value, init, { deep: true });
</script>

<style lang="scss" scoped></style>
